<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head-box">

			<sh-filter @change="onFilter"></sh-filter>
		</view>

		<view class="hot-goods u-m-b-10 u-p-x-16">
			<view class="u-waterfall">
				<view id="u-left-column" class="u-column">
					<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList"
						:key="leftGoods.id">
						<ljshop-goods-card :detail="leftGoods" :type="leftGoods.activity_type" :image="leftGoods.img"
							:title="leftGoods.name" :subtitle="leftGoods.caption?leftGoods.caption:''" :price="leftGoods.price"
							:originPrice="((leftGoods.price-leftGoods.cost)*rebate/100).toFixed(2)"
							:sales="leftGoods.sales" 
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
							v-if="leftGoods.type!='EXCHANGE'">
						</ljshop-goods-card>
					</view>
				</view>
				<view id="u-right-column" class="u-column">
					<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList"
						:key="rightGoods.id">
						<ljshop-goods-card :detail="rightGoods" :type="rightGoods.activity_type"
							:image="rightGoods.img" :title="rightGoods.name" :subtitle="rightGoods.caption?rightGoods.caption:''"
							:price="rightGoods.price"
							:originPrice="((rightGoods.price-rightGoods.cost)*rebate/100).toFixed(2)"
							:sales="rightGoods.sales" 
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
							v-if="rightGoods.type!='EXCHANGE'">
						</ljshop-goods-card>
					</view>
				</view>
			</view>

			<!--<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center"
				@tap.stop="loadMore">
				<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999"
					:class="{ 'refresh-active': isRefresh }"></text>
				{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		 </button> -->
		</view>

		<!-- 缺省页 -->
		<ljshop-empty v-if="isEmpty" :image="'https://image.hzwltb69.com/app/images/nogoods.png'"
			tipText="暂无该商品，还有更多好货等着你噢~">
		</ljshop-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />

	</view>
</template>

<script>
	import shFilter from './components/sh-filter.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
	export default {
		components: {
			shFilter
		},
		data() {
			return {
				isEmpty: false,
				goodsList: [],
				searchVal: '',
				categoryId: 0,
				page: 1,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 0,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				hasMroe: true,
				order: '',
				rebate: 0,
				isAdding: false

			};
		},
		// 触底加载更多
		onReachBottom() {
			if (!this.isAdding) {
				if (this.hasMroe) {
					this.page += 1;
					this.getGoodsList();
				}
			}

		},
		onLoad() {
			if (this.$Route.query.id) {
				this.categoryId = this.$Route.query.id;

				this.getGoodsList();
			} else if (this.$Route.query.hasOwnProperty('keywords')) {
				this.keywords = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				!this.$Route.query.keywords && this.getGoodsList();
			} else {
				this.getGoodsList();
			}
		},
		methods: {
			// 瀑布流相关
			async splitData() {
				if (!this.tempList.length) {
					this.isAdding = false
					return
				};
				if (this.tempList.length == 1) {
				this.isAdding = false
			}
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		clear() {
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0;
			this.rightHeight = 0;
			this.tempList = [];
		},

		onFilter(e) {
			this.order = e;
			this.goodsList = [];
			this.page = 1;
			this.lastPage = 1;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},
		// 键盘搜索,输入搜索
		onSearch() {
			this.goodsList = [];
			this.page = 1;
			this.lastPage = 1;
			this.keywords = this.searchVal;
			this.clear();
			this.$u.debounce(this.getGoodsList);
		},

		// 队列
		getArr(list, item) {
			let arr = list;
			let length = 10; //队列长度
			arr.length < length ? arr.unshift(item) : arr.pop();
			return arr;
		},

		// 清除搜索框
		clearSearch() {
			this.searchVal = '';
			this.clear();
		},
		// 商品列表
		getGoodsList() {
			let that = this;
			this.isAdding = true
			that.loadStatus = 'loading';
			//console.info(that.keywords)
			//console.info(that.page)
			//console.info(that.order)
			let defaultOrder = 0;
			let priceOrder = 0;
			let salesOrder = 0;
			let newProdcutOrder = 0;
			if (that.order) {
				defaultOrder = that.order.defaultOrder;
				priceOrder = that.order.priceOrder;
				salesOrder = that.order.salesOrder;
				newProdcutOrder = that.order.newProdcutOrder;
			}
			uni.showLoading({

			})
			that.$http('goods.stroecateproListnew', {
				storeProductCategoryId: that.categoryId,
				current: that.page,
				size:20,
				salesOrder: salesOrder,
				priceOrder: priceOrder,
				defaultOrder: defaultOrder,
				newProdcutOrder: newProdcutOrder,
				storeid: uni.getStorageSync("detailStoreId")
			}).then(res => {
				// console.info(JSON.stringify(res))
				if (res.code == 1) {
					if (that.page == 0 && res.data.length == 0) {
						that.isEmpty = true
					}
					if (res.data.length < 20) {
						that.loadStatus = 'nomore'
					}
					uni.hideLoading()
					if (res.data.length > 0) {
						if (that.page == 0) {
							if (res.data.length < 10) {
								this.hasMroe = false;
							}
							this.rebate = res.rebate
							this.hasMroe = true;
							that.goodsList = res.data;
							that.tempList = res.data;
							that.goodsList.length && that.splitData();
						} else {
							that.goodsList = res.data;
							that.tempList = res.data;
							that.goodsList.concat(res.product)
							that.tempList.concat(res.product)
							that.goodsList.length && that.splitData();
						}
					} else {
						this.hasMroe = false;
					}

				} else {

					that.isEmpty = true

				}
			});
		}
	}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
</style>